<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
	
	<div th:fragment="chart">
		<div id="studyChart" style="width: 90%;height: 500px;"></div>
	
		<script type="text/javascript">
		$(function(){
			getChart();
		});
		
		function getChart(){
			$.ajax({
				url:"/my/getChart",
				type:"post",
				dataType:"json",
				data : {},
				success: function(reponse){
					if(reponse.code == 200) {
						createChart(reponse.data)
					} else {
						alert("初始化报表异常");
					}
				},
				error:function(){
					alert("初始化报表异常");
				}
			});
			
			
			
			
		}
		
		function createChart(data){
			var x = [];
			var y = [];
			for (var i = 0; i < data.length; i++) {
				x.push(data[i].date);
				y.push(data[i].time);
			}
			Highcharts.chart('studyChart',{
			    chart: {
			        type: 'column'
			    },
			    title: {
			        text: '每日时长统计'
			    },
			    /* subtitle: {
			        text: '数据来源: WorldClimate.com'
			    }, */
			    credits:{enabled: false}, // 禁用版权信息
			    xAxis: {
			        categories: x,
			        crosshair: true
			    },
			    yAxis: {
			        min: 0,
			        title: {
			            text: '时长（小时）'
			        }
			    },
			    /* tooltip: {
			        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
			        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
			        footerFormat: '</table>',
			        shared: true,
			        useHTML: true
			    }, */
			    plotOptions: {
			        column: {
			            borderWidth: 0
			        }
			    },
			    series: [{
			        name: '时长',
			        data: y
			    }]
			});
		}
		</script>
	</div>
</body>
</html>

